<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ include file="../common/base.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${ctx}/js/webuploader/webuploader.css" type="text/css">
<link rel="stylesheet" href="${ctx}/js/goods/goodsImageUpload/imageUpload.css" type="text/css">
<script type="text/javascript" src="${ctx}/js/webuploader/webuploader.js"></script>
<script type="text/javascript" src="${ctx}/js/goods/goodsImageUpload/imageUpload.js"></script>
<script type="text/javascript" src="${ctx}/js/goods/edit.js"></script>
<style type="text/css">
	ul{list-style:none;}
	.modal-body li a{text-decoration: none;}
	.modal-body ul{float:left;margin-right:40px;padding-left:0;border:1px solid #c1c1c1;width:80px;border-top:0;}
	.modal-body li{height:40px;line-height:40px;border-top:1px solid #c1c1c1;text-align: center;}
	.modal-body li.active{border-right:0;background-color: #eee;}
	.col-sm-3 {width: 15%;float: left;}
	.col-sm-9 {width: 85%;float: left;}
	.modal-content{position: absolute; width:600px;}
	.modal-body{ padding-left:5px;padding-top:5px;}
	#goodsPhotoDiv{padding:5px;text-align:center;}
	#goodsPhotoDiv span{display:inline-block;width:100px;}
	#goodsPhotoDiv span img{height:100px;}
</style>
</head>
<body>
	<div class="l_err" style="width: 100%; margin-top: 2px;"></div>
	<form id="form" name="form" class="form-horizontal" method="post" action="${ctx}/goods/saveGoods">
		<input type="hidden" value="${goods.id}" name="id" id="id">
		<section class="panel panel-default">
			<div class="panel-body">
				<div class="form-group">
					<label class="col-sm-2 control-label">名称</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" placeholder="请输入商品名称" required
							value="${goods.name}" name="name" id="name" maxlength="40">
					</div>
					<label class="col-sm-2 control-label">编码 </label>
					<div class="col-sm-4">
						<input type="text" class="form-control" placeholder="请输入商品编码" required
							value="${goods.code}" name="code" id="code" maxlength="32">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label">助记码</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" placeholder="请输入商品助记码" readonly="readonly"
							value="${goods.shorthand}" name="shorthand" id="shorthand" maxlength="40">
					</div>
					<label class="col-sm-2 control-label">规格型号 </label>
					<div class="col-sm-4">
						<input type="text" class="form-control" placeholder="请输入商品规格型号" 
							value="${goods.specification}" name="specification" id="specification" maxlength="30">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label">关键词</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" placeholder="请输入商品关键词" required
							value="${goods.keywords}" name="keywords" id="keywords" maxlength="255">
					</div>
					<label class="col-sm-2 control-label">标题</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" placeholder="请输入商品标题" required
							value="${goods.title}" name="title" id="title" maxlength="500">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label">条型码</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" placeholder="请输入商品条型码" value="${goods.defaultBarCode}" name="defaultBarCode" id="defaultBarCode" maxlength="20">
					</div>
					<label class="col-sm-2 control-label">分类</label>
					<div class="col-sm-4">
						<select class="form-control" name="classId" id="classId" required>
							<option value="">请选择</option>
							<c:forEach var="item" items="${goodsClassList}">
								<option value="${item.id}" <c:if test="${item.id==goods.classId}">selected</c:if>>${item.name}</option>
							</c:forEach>
						</select>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label">单位</label>
					<div class="col-sm-4">
						<select class="form-control" name="unit" id="unit" required>
							<option value="">请选择</option>
							<c:forEach var="item" items="${goodsUnitList}">
								<option value="${item.code}" <c:if test="${item.code==goods.unit}">selected</c:if>>${item.name}</option>
							</c:forEach>
						</select>
					</div>
					<label class="col-sm-2 control-label">品牌</label>
					<div class="col-sm-4">
						<select class="form-control" name="brand" id="brand" required>
							<option value="">请选择</option>
							<c:forEach var="item" items="${goodsBrandList}">
								<option value="${item.id}" <c:if test="${item.id==goods.brand}">selected</c:if>>${item.name}</option>
							</c:forEach>
						</select>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label">成本价(￥)</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" placeholder="请输入商品成本价" required
							value="${goods.costPrice}" name="costPrice" id="costPrice" maxlength="10">
					</div>
					<label class="col-sm-2 control-label">市场价(￥)</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" placeholder="请输入商品市场价" required
							value="${goods.marketPrice}" name="marketPrice" id="marketPrice" maxlength="10">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label">商品库存</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" placeholder="请输入商品库存" required 
							value="${goods.baseQuantity}" name="baseQuantity" id="baseQuantity" maxlength="10">
					</div>
					
					<label class="col-sm-2 control-label">最低库存</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" placeholder="请输入最低库存" 
							value="${goods.lowQuantity}" name="lowQuantity" id="lowQuantity" maxlength="10">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label">列表页图片</label>
					<div class="col-sm-8">
						<input type="hidden" id="picture" name="picture" value="${goods.picture}" />
						<c:choose>
							<c:when test="${goods.picture!=null}">
								<div id="defaultImageDiv">
									<img src="${baseFile}${goods.picture}" width="100" />
								</div>
							</c:when>
							<c:otherwise>
								<div id="defaultImageDiv">暂无默认图片</div>
							</c:otherwise>
						</c:choose>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">商品图片</label>
					<div class="col-sm-8">
						<div id="photosDiv">
							<c:choose>
								<c:when test="${goodsImageList!=null}">
									<input type="hidden" id="photoSize" value='${fn:length(goodsImageList)}' />
								</c:when>
								<c:otherwise>
									<input type="hidden" id="photoSize" value="0" />
								</c:otherwise>
							</c:choose>
						</div>
						<div class="parentFileBox" style="padding-left:0px;"> 
							<ul class="upload-listimg fileBoxUl">
								<c:forEach var="item" items="${goodsImageList}">
									<li>
										<input type="hidden" name="photos" value="${item}"/>
										<img src="${baseFile}${item}" class="photoImg" id="${item}" />
										<i class="diyCancel"><img src="${ctx}/js/webuploader/images/x_alt.png" alt="" /></i>
										<span id="setDefaultImageId">设为默认</span>
									</li>
								</c:forEach>
							</ul>
						</div>
						<div id="selectFile"></div>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label">类型</label>
					<div class="col-sm-8">
						<input type="checkbox" id="type01" name="types" value="01"/>特别推荐&nbsp;&nbsp;
						<input type="checkbox" id="type02" name="types" value="02"/>新品热销&nbsp;&nbsp;
						<input type="checkbox" id="type03" name="types" value="03"/>特价商品&nbsp;&nbsp;
						<input type="checkbox" id="type04" name="types" value="04"/>潮流热销&nbsp;&nbsp;
						<input type="checkbox" id="type09" name="types" value="09"/>包邮&nbsp;&nbsp;
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label">多规格商品</label>
					<div class="col-sm-8">
						<!-- 是否加载过规格数据 -->
						<input type="hidden" id="isOpenSkuId" name="isOpenSku" value="0"/>
						<input type="hidden" id="isLoadedSkuId" name="isLoadedSku" value="0"/>
						<button type="button" class="btn btn-danger" data-toggle="modal" id="openSku" style="display:none;">开启规格</button>
						<button type="button" class="btn btn-danger" data-toggle="modal" id="editSku" style="display:none;">编辑</button>
						<button type="button" class="btn btn-default" id="closeSku" style="display:none;">关闭</button>
						<span id="openSkuDescId" style="display:none;">开启规格前先填写以上库存等信息，可自动复制信息到货品</span>
						<span id="editSkuId"></span>
						<span id="generateProductId"></span>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label">商品描述</label>
					<div class="col-sm-8">
						<textarea id="descript" name="descript" style="height:300px;">${goods.descript}</textarea>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label">产品及企业优势</label>
					<div class="col-sm-8">
						<textarea id="advantage" name="advantage" style="height:300px;">${goods.advantage}</textarea>
					</div>
				</div>
			</div>
			<footer class="panel-footer text-right bg-light lter">
				<button type="submit" class="btn btn-success btn-s-xs">保存</button>
			</footer>
			
			<!-- 商品规格 -->
			<div class="modal fade" id="goodsSkuModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="false" aria-labelledby="goodsSkuModalLabel" aria-hidden="true">
				<div class="modal-dialog gooddialog">
					<div class="modal-content">
						<div class="modal-header">
							<!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> -->
							<h4 class="modal-title">商品规格</h4>
						</div>
						<div class="modal-body" style="max-height:750px;padding-bottom:0px;">
							<div class="panel-body">
								<div class="goodtypebox">
								<!-- 规格名 -->
								<div class="goodsSkuId span4">
									<ul id="goodsSkuId"></ul>
								</div>
								<!-- 规格值 -->
								<div class="tab-content span8" id="goodsSkuValueId"></div>
								</div>	
								<p style="margin-bottom:40px;text-align:center;">
									<button type="button" class="btn btn-danger" id="generateProduct">生成货品</button>
									<span id="skuErrorId" style="color:red;"></span>
								</p>
								<table id="productTableId" style="table-layout:fixed;word-wrap:break-word;"></table>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-success" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-success" id="saveGoodsProduct">确定</button>
						</div>
					</div>
				</div>
			</div>
		</section>
		<div id="goodsPhotoId" style="display:none;">
			<div id="goodsPhotoDiv"> 
				<c:forEach var="item" items="${goodsImageList}">
					<span id="${item}">
						<img src="${baseFile}${item}" width="100px" height="100px" />
						<input type="radio" name="goodsPhoto" value="${item}"/>
					</span>
				</c:forEach>
			</div>
		</div>
	</form>
	<script type="text/javascript" src="${ctx}/js/kindeditor/kindeditor.js"></script>
	<script type="text/javascript" src="${ctx}/js/kindeditor/lang/zh_CN.js"></script>
	<script type="text/javascript">
		//onloadurl();
		var editor;
		//初始化kindEditor
		function kedit(kedit){
			editor = KindEditor.create(kedit, {
				resizeType : 1,
				imageSizeLimit : '5MB', //批量上传图片单张最大容量
			    imageUploadLimit : 20, //批量上传图片同时上传最多个数
				allowPreviewEmoticons : true,
				allowImageUpload : true,
				fullscreenShortcut : false,
				width: '100%',
				uploadJson:rootPath+'/commonImage/uploadImage/goods',
				items : [
				 		'source', '|', 'undo', 'redo', '|', 'preview', 'cut', 'copy', 'paste',
				 		'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
				 		'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
				 		'superscript', 'clearhtml', 'quickformat', '|', 'fullscreen', '/',
				 		'formatblock', 'title', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', '|','bold',
				 		'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
				 		'media','table', 'hr', 'emoticons', 'pagebreak', 'link', 'unlink'
				],
				afterBlur:function(){	//此方法保证能传递数据到后台
					this.sync();
				}
			});
		}
		
		$(function(){
			kedit('textarea[name="descript"]');
			kedit('textarea[name="advantage"]');
			
			//绑定上传图片按钮
			bindSelectFile();
			
			//选中商品类型
			var str = '${typeMapList}';
			if(str!=''){
				var typeMapList = eval('(' + str + ')');	//把字符串转换成对象
				$.each(typeMapList,function(index,obj){
					$("#type"+obj.typeCode).attr("checked", true);
				});
			}
			
			//tab切换
			$('.modal-body li').click(function(){
				$(this).addClass('active').siblings().removeClass('active');
			});
			
			//设置删除图标
			$('.parentFileBox>.fileBoxUl>li').hover(function(){
				$(this).find('i').css('display','block');
			},function(){
				$(this).find('i').css('display','none');
			});
			//删除相册图片
			$(document).on("click",".diyCancel",function(){
				var spanId = $(this).parents('li').find('input').val();
				$.each($("#goodsPhotoDiv").children(),function(i,o){
					if(spanId==o.id){
						$(this).remove();
						return false;
					}
				});
				$(this).parents('li').remove();
				webUploader.options.fileNumLimit=webUploader.options.fileNumLimit+1;
			});
			
			//设置列表页默认图片
			$(document).on("click",".parentFileBox>.fileBoxUl>li span",function(){
				//已经上传的和新上传的图片，在html中的代码结构不一样，现改成统一找图片的方式
				var imgSrc = $(this).parents("li").find("img").attr("id");
				$("#picture").val(imgSrc);
				$("#defaultImageDiv").empty();
				$("#defaultImageDiv").append('<img src="'+baseFile+imgSrc+'" style="width:100px"/>');
			});
			
			$('.fileBoxUl').on("mouseover mouseout","li",function(event){
				 if(event.type == "mouseover"){
					 $(this).find('.diyCancel').css('display','block');
					 $(this).find('span').stop().slideDown();
				 }else if(event.type == "mouseout"){
					 $(this).find('.diyCancel').css('display','none');
					 $(this).find('span').stop().slideUp();
				 }
			});
			
			//设置弹出框的位置
			//获取modal的宽度  
			var modalWidth = $("#goodsSkuModal").width();  
			//计算偏移量  
			var left = "-" + parseInt(modalWidth) / 2 + "px";                        
			$(".modal-content").css({"margin-left":left});
		});
		
	</script>
</body>
</html>